<template>
	<view>
		<view  style="margin-left: 20rpx;">
		<view class="row hpv">
			<view @tap="ts('投诉技师')" class="yanse row" :class="tousu == '投诉技师' ? 'show' : ''">
				<text>投诉技师</text>
			</view>
			<view @tap="ts('问题反馈')" class="yanse row" :class="tousu == '问题反馈' ? 'show' : ''">
				<text>问题反馈</text>
			</view>
			<view @tap="ts('APP建议')" class="yanse row" :class="tousu == 'APP建议' ? 'show' : ''">
				<text>APP建议</text>
			</view>
			<view @tap="ts('其他')" class="yanse row" :class="tousu == '其他' ? 'show' : ''">
				<text>其他</text>
			</view>
		</view>
		</view>
		
		<!--
		<text class="title">投诉/反馈标题</text>
		<view style="background-color: #FFFFFF;border-radius: 10rpx;margin: 20rpx;height:100rpx;margin-top: -50rpx;">
		<textarea class="textarea"  v-model="name" placeholder="输入反馈或投诉的标题" placeholder-style="color:#dadbdb;" />
		</view>-->
		
		<text class="title">投诉/反馈内容</text>
		<view style="background-color: #FFFFFF;border-radius: 10rpx;margin: 20rpx;height:200rpx;margin-top: -40rpx;">
		<textarea class="textarea" v-model="info" placeholder="若是投诉技师,请提供服务订单号.其他问题自行表述." placeholder-style="color:#dadbdb;" />
		</view>
		<view style="margin-top: 40rpx;">
		<text class="title2">上传图片（选填,限5张）</text>
		</view>
		<view style="background-color: #FFFFFF;border-radius: 10rpx;margin: 20rpx;height:400rpx;">
		<view class="view row " style="margin: 20rpx;">
			<view v-for="(item,index) in imgarr" class="imgv">
				<image :src="item" mode="aspectFill" ></image>
				<text @tap="remov(index)" class="iconfont">&#xe637;</text>
			</view>
			<text @tap="addimg" v-if="imgarr.length < 5" class="iconfont addimg">&#xe63a;</text>
		</view>
		</view>
		<view style="margin-top: 40rpx;">
		<text class="title2" >联系电话(可选，为了更好为您服务，建议填写)</text>
		</view>
		<view style="background-color: #FFFFFF; border-radius: 10rpx;margin: 20rpx;margin-top: 30rpx;">
		
		<input  class="input" type="text" maxlength="11" v-model="phone" placeholder="请输入您的联系电话"/>
		</view>
		<text class="btns" @tap="btns">提交</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				info:'',
				phone:'',
				imgarr:[],
				tousu:''
			}
		},
		methods: {
			ts(idex){
				this.$set(this,'tousu',idex)
			},
			addimg(){
				uni.chooseImage({
					count:5 - this.imgarr.length,
					success: (e) => {
						console.log(e);
						this.imgarr = [...this.imgarr,...e.tempFilePaths]
					}
				})
			},
			remov(index){
				this.imgarr.splice(index,1);
			},
			
			btns(){
				uni.showModal({
					content:'请确认是否提交',
					success: (e) => {
						if(e.confirm){
				if(this.tousu == ''){
					this.showToast('请选择分类')
				}else 
				if(this.info == ''){
					this.showToast('请输入内容')
				//}else if(this.phone.length != 11){
					//this.showToast('请输入正确的手机号')
				}else{
					
					this.showload('正在提交！');
					if(this.imgarr.length > 0){
						var uparr = [];
						this.imgarr.forEach((item,index)=>{uparr.push({uri:item,name:index.toString()});})
						uni.uploadFile({url:this.ip + 'upload2.php',files:uparr,formData:{sign:this.$store.state.userinfo.token,type:'img'},success: (rs) => {
							this.tijiao(JSON.stringify(JSON.parse(rs.data).list));
							console.log(rs);
						},fail:()=>{
							this.hideload();
							this.showToast('图片文件上传失败！');
						}})
						
					}else{
						this.tijiao('');
					}
					
				      }
				     }
				   }
			  })	
			},
			tijiao(imgarr){
				let sign = this.md5(this.$store.state.userinfo.token + this.name + this.phone);
				this.GetJson(this.ip + 'addcomplaint.php','POST',{
					sign:sign,
					token:this.$store.state.userinfo.token,
					name:this.name,
					info:this.info,
					phone:this.phone,
					technician:this.tousu,
					imgarr:imgarr,
					lat:this.$store.state.gps.latitude,
					lng:this.$store.state.gps.longitude
				},e=>{
					this.hideload();
					if(this.isdata(e)){
						this.showToast('提交成功！');
						uni.navigateBack();
					}
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'complaintcenter/complaintcenter'
			})
		}
	}
</script>

<style>
	page{
		background-color: #f5f6f6;
		
	}
	.title{
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		margin: 40rpx;
		line-height: 100rpx;
		
	}
	.title::after{
		content: "*";
		left: -20rpx;
		font-size: 32rpx;
		color: #FF0000;
		position: absolute;
	}
	.input{
		width: 657rpx;
		height: 100rpx;
		top: 20rpx;
		margin: 20rpx;
		font-size: 32rpx;
		color: #000000;
	}
	.textarea{
		width: 657rpx;
		height: 237rpx;
		top: 20rpx;
		margin: 20rpx;
		font-size: 32rpx;
		color: #000000;
	}
	.title2{
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		top: 100rpx;
		margin: 20rpx;
	}
	
	.view{
		margin-top: 13rpx;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		flex-wrap: wrap;
	}
	.addimg{
		width: 120rpx;
		height: 120rpx;
		display: block;
		font-size: 60px;
		text-align: center;
		line-height: 120rpx;
		color: #8a8a8a;
		margin-bottom: 20rpx;
	}
	.imgv{
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.imgv>image{
		width: 120rpx;
		height: 120rpx;
	}
	.imgv>text{
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		background-color: rgba(0,0,0,.6);
		color: #FFFFFF;
		font-size: 25rpx;
		border-radius: 100px;
		right: -15rpx;
		top: -15rpx;
		text-align: center;
		line-height: 35rpx;
	}
	.btns{
		margin: 60rpx auto 0;
		background: linear-gradient(45deg,rgba(211,44,253,0.2),rgba(211,44,253,0.7));
		width: 643rpx;
		height: 94rpx;
		border-radius:50rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		display: block;
		text-align: center;
		line-height: 94rpx;
	}
	.hpv{
		margin-top: 43rpx;
	}
	.hpv>text{
		margin-right: 80rpx;
	} 
	.hpv>view{
		margin-right: 44rpx;
		border-radius: 20rpx;
		padding:8rpx;
		font-size: 28rpx;
	}
	.hpv>view>:nth-child(1){
		color: #FFFFFF;
		font-size: 28rpx;
		margin-right: 17rpx;
		border-radius: 20rpx;
		padding: 8rpx;
	}
	.hpv>view>:nth-child(2){
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 20rpx;
		padding: 8rpx;
	}
	.yanse{	
		border-color: var(--maincolor) !important;
		color: var(--maincolor) !important;
		background: linear-gradient(45deg,rgba(211,44,253,0.1),rgba(211,44,253,0.2));
		}
	.show{
		border-color: var(--maincolor) !important;
		color: var(--maincolor) !important;
		background: linear-gradient(45deg,rgba(211,44,253,0.2),rgba(211,44,253,0.9));
		}
</style>
